<!--
 * @Description: 侧边栏菜单组件
 * @Author: 陈三愿
 * @Date: 2025-09-14 22:49:00
 * @LastEditTime: 2025-09-15 20:06:51
-->
<script setup lang="ts">
import { ref } from "vue";

// 菜单数据
const menuItems = ref([
  {
    title: "仪表盘",
    icon: "dashboard",
    path: "/",
    active: true,
  },
  {
    title: "用户管理",
    icon: "users",
    path: "/users",
    active: false,
  },
  {
    title: "表单生成器",
    icon: "form",
    path: "/form",
    active: false,
  },
  {
    title: "自定义表单",
    icon: "form",
    path: "/customFrom",
    active: false,
  },
  {
    title: "自定义表格",
    icon: "customTable",
    path: "/customTable",
    active: false,
  },
  {
    title: "设置",
    icon: "settings",
    path: "/settings",
    active: false,
    children: [
      {
        title: "个人信息",
        path: "/settings/profile",
        active: false,
      },
      {
        title: "系统设置",
        path: "/settings/system",
        active: false,
      },
      {
        title: "通知设置",
        path: "/settings/notifications",
        active: false,
      },
    ],
  },
  {
    title: "帮助中心",
    icon: "help",
    path: "/help",
    active: false,
  },
]);

// 控制子菜单展开状态
const expandedMenus = ref<Record<string, boolean>>({
  设置: true, // 默认展开设置菜单
});

// 切换子菜单展开状态
const toggleSubmenu = (title: string) => {
  expandedMenus.value[title] = !expandedMenus.value[title];
};
</script>

<template>
  <div class="p-4">
    <h2 class="text-xl font-bold mb-4">菜单导航</h2>

    <ul class="menu bg-base-100 w-full">
      <li v-for="(item, index) in menuItems" :key="index">
        <!-- 有子菜单的项目 -->
        <template v-if="item.children && item.children.length">
          <div
            class="flex justify-between items-center cursor-pointer"
            @click="toggleSubmenu(item.title)"
            :class="{ 'font-bold': expandedMenus[item.title] }"
          >
            <span>{{ item.title }}</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 transition-transform"
              :class="{ 'transform rotate-180': expandedMenus[item.title] }"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </div>

          <!-- 子菜单 -->
          <ul v-if="expandedMenus[item.title]" class="pl-4 mt-2 space-y-1">
            <li v-for="(child, childIndex) in item.children" :key="childIndex">
              <NuxtLink :to="child.path" class="block py-1 hover:text-primary">
                {{ child.title }}
              </NuxtLink>
            </li>
          </ul>
        </template>

        <!-- 无子菜单的项目 -->
        <NuxtLink
          v-else
          :to="item.path"
          class="block py-2 hover:text-primary"
          :class="{ 'font-bold': item.active }"
          @click="
            () => {
              item.active = true;
              console.log('Navigating to:', item.path);
            }
          "
        >
          {{ item.title }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.menu li {
  margin-bottom: 0.5rem;
}
</style>
